<template>
	<view>
		<u-navbar title="手机号登录"></u-navbar>
		<view class="wrap">
			<view class="phone">
				<view class="iconfont icon-shouji icon">
				</view>
				<u-input v-model="form.phone" type="text" :customStyle="inputSty" height="93.75"/>
			</view>	
			<view class="password">
				<view class="iconfont icon-xShape icon">
				</view>
				<u-input v-model="form.password" type="text" :customStyle="inputSty" height="93.75"/>
			</view>
			<view class="login_btn animate__animated" hover-class="animate__fadeIn">
				登录
			</view>
			<view class="reset_password animate__animated" hover-class="animate__fadeIn">
				重置密码
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					phone:'',
					password:''
				},
				inputSty:{
					'font-size':'16px'
				}
			};
		}
	}
</script>

<style lang="scss">
.wrap{
	margin-top: 35.41rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	font-family: 'Microsoft YaHei';
	.phone{
		height: 93.75rpx;
		width: 704.16rpx;
		border: 1px solid #ccc;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		.icon{
			width: 58.33rpx;
			height: 58.33rpx;
			font-size: 41.66rpx;
			line-height: 58.33rpx;
			text-align: center;
		}
	}
	.password{
		@extend .phone;
		margin-top: 22.91rpx;
	}
	.login_btn{
		width:704.16rpx;
		height: 93.75rpx;
		// background-color: $main-them-color;
		color: #fff;
		// border-radius: $main-border-radius;
		line-height: 93.75rpx;
		text-align: center;
		font-size: 33.33rpx;
		margin-top: 70.83rpx;
	}
	.reset_password{
		font-size: 29.16rpx;
		color: rgba(51, 51, 51, 1);
		width: 206.25rpx;
		height: 93.75rpx;
		line-height: 93.75rpx;
		margin-top: 39.58rpx;
		text-align: center;
	}
}
</style>
